<!--顶部导航栏-->
<template>

  <div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router='true'>

      <el-menu-item index="3" style="float: right">我的消息</el-menu-item>
      <el-menu-item index="/Plan" style="float: right">
        <el-avatar shape="square" :size="40" :src="squareUrl"></el-avatar>
      </el-menu-item>
      <el-menu-item style="float: right">
        <el-button type="info" icon="el-icon-search" plain @click="addinfor">搜索</el-button><!--查询单词搜索按钮-->
      </el-menu-item>
      <el-menu-item style="float: right">
        <el-input
          placeholder="请输入单词你要查询的单词"
          v-model.lazy="getWords" >
        </el-input><!--单词搜索框-->
      </el-menu-item>

    </el-menu>



  </div>
</template>

<script>
import { fanyi } from "../apis/youdao";

let words;//被翻译的文本

export default {
  name: "headerNavi",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      getWords:'',
      Translation_information:[],
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    open() {
      this.$alert('请输入正常的单词', '出错啦', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${ action }`
          });
        }
      });
    },
    addinfor:function() {
      fanyi(words).then(
        (data)=>{
          if(data!=null){
            console.log(data);
            this.$router.push({
              name:'WordsMean',
              path:'/WordsMean',
              params:{wordsTranslation:data.translation,
                wordsBasic:data.basic.explains,
              wordsPhonetic:data.basic.phonetic}
            })
        }else{
              this.open();
          }
        }
      );
      },
    returnWordsMean(){
      this.$router.replace('/WordsMean');
    },
  },
  watch: {
    getWords() {
      words=this.getWords;//获取被翻译的文本
    }
  },
  mounted() {
    window.$headerNavi = this;
  }
}
</script>

<style scoped>

</style>
